<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="系统">
          <el-select clearable
                     filterable
                     v-model="queryForm.systemUuid"
                     @change="refreshUseCaseOptions"
                     placeholder="请选择系统">
            <el-option
              v-for="item in systemOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用例">
          <el-select :disabled="queryForm.systemUuid === ''"
                     clearable filterable v-model="queryForm.useCaseUuid" placeholder="请选择用例">
            <el-option
              v-for="item in useCaseOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="addNew">新增</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :data="pageResult.data"
        border
        :default-sort="{prop: 'updateTime', order: 'descending'}"
        style="width: 100%; margin-top: 20px;font-size: 10px">
        <el-table-column
          align="center"
          label="系统名称">
          <template scope="scope">
            {{ getSystemName(scope.row.systemUuid) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="用例名称">
          <template scope="scope">
            {{ getUseCaseName(scope.row.useCaseUuid) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="是否有效">
          <template slot-scope="scope">
            <span v-if="scope.row.deleted">无效</span>
            <span v-if="!scope.row.deleted">有效</span>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          align="center"
          width="300"
          label="创建/修改时间">
          <template slot-scope="scope">
            {{ baseDateFormat(scope.row.createTime) }} / {{ baseDateFormat(scope.row.updateTime) }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          width="100"
          label="操作">
          <template slot-scope="scope">
            <el-button style="margin-left: 0px" type="text" size="mini" @click="toEdit(scope.row)">编辑</el-button>
            <!--            <el-button style="margin-left: 0px;color: #189c1a" type="text" size="mini" @click="toDisableOrEnable(scope.row)">-->
            <!--              <span v-if="!scope.row.deleted">禁用</span>-->
            <!--              <span v-if="scope.row.deleted">启用</span>-->
            <!--            </el-button>-->
            <!-- TODO 暂时不支持删除 -->
            <!--            <el-button style="margin-left: 0px;color: red" type="text" size="mini" @click="deleteOne(scope.row)">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>

      <el-footer>
        <vue-page :paginator="pageResult.paginator" :query="query"></vue-page>
      </el-footer>
    </el-card>

    <unit-view-tree-form ref="unitViewTreeForm"></unit-view-tree-form>
  </div>
</template>

<script>
import vuePage from "@/views/common/vue-page.vue";
import vueLog from "@/views/common/vue-log.vue";
import unitViewTreeForm from "@/views/bic-config/dialog/unit-view-tree-form.vue";
import {allUseCaseSelector, nodeVueType, systemSelector, useCaseSelector} from "@/api/loadSelectorApi";
import {unitViewTreePageQuery} from "@/api/unitViewTree";

export default {
  name: "unit-view-config",
  components: {
    unitViewTreeForm,
    vuePage,
    vueLog,
  },
  data() {
    return {
      systemOptions: [],
      useCaseOptions: [],
      allUseCaseOptions: [],
      nodeVueTypeOptions: [],
      queryForm: {
        systemUuid: '',
        useCaseUuid: '',
      },
      // 查询返回结果
      pageResult: {
        data: [],
        paginator: {
          currentPage: 0,
          totalCount: 0,
          pageSize: 10,
          totalPage: 0
        }
      },
      logTargetId: undefined,
    }
  },
  async created() {
    let vm = this
    vm.systemOptions = await systemSelector()
    vm.allUseCaseOptions = await allUseCaseSelector()
    vm.nodeVueTypeOptions = await nodeVueType()
    await vm.query()
  },
  methods: {
    async query() {

      let vm = this
      let loading = vm.loading();
      let ret = await unitViewTreePageQuery(vm.queryForm, vm.pageResult.paginator)
      loading.close()
      if (ret.ok) {
        vm.pageResult = ret.data.queryPage
      } else {
        vm.$message({type: 'error', message: '查询失败：' + ret.message});
      }
    },
    addNew() {
      this.$refs.unitViewTreeForm.load();
    },
    toEdit(row) {
      this.$refs.unitViewTreeForm.load(row);
    },
    toDisableOrEnable(row) {
      let vm = this
      let clone = vm.$cloneObj(row);
      clone.deleted = !clone.deleted
      vm.$confirm('是否确认修改为【' + (clone.deleted ? '无效' : '有效') + '】', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$refs.unitViewTreeForm.doSave(clone);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    },
    getSystemName(systemUuid) {
      let vm = this
      for (let i = 0; i < vm.systemOptions.length; i++) {
        let systemOption = vm.systemOptions[i];
        if (systemOption.value === systemUuid) {
          return systemOption.label
        }
      }
      return systemUuid
    },
    getUseCaseName(useCaseUuid) {
      let vm = this
      for (let i = 0; i < vm.allUseCaseOptions.length; i++) {
        let useCaseOption = vm.allUseCaseOptions[i];
        if (useCaseOption.value === useCaseUuid) {
          return useCaseOption.label
        }
      }
      return useCaseUuid
    },
    async refreshUseCaseOptions() {
      let vm = this
      vm.queryForm.useCaseUuid = ''
      if (vm.queryForm.systemUuid === '') {
        vm.useCaseOptions = []
      } else {
        vm.useCaseOptions = await useCaseSelector(vm.queryForm.systemUuid)
      }
    }
  }
}
</script>

<style scoped>

</style>
